<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="renderer" content="webkit">
		<link href="../../css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../../js/jquery-easyui-1.4.4/themes/bootstrap/easyui.css">
		<link rel="stylesheet" href="../../js/jquery-easyui-1.4.4/themes/icon.css">
		<link rel="stylesheet" href="../../css/ext_icon.css">
		<script src="../../js/jquery-easyui-1.4.4/jquery.min.js"></script>
		<script src="../../js/bootstrap.min.js"></script>
		<script src="../../js/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
		<script src="../../js/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
		<script src="../../js/ext_jquery.js"></script>
		<script src="../../js/ext_easyui.js"></script>
		<script src="../../js/jquery.form.js"></script>
		<script src="../../js/My97DatePicker/WdatePicker.js"></script>
		<script src="../../js/Chart.min.js"></script>
		<script src="../../js/util.js"></script>
		<script src="../../js/ckeditor/ckeditor.js"></script>
		<link rel="stylesheet" href="../../css/style.css">
		<script src="../../js/main.js"></script>
		<title></title>
		<script>
			var dataGrid;
			$(function() {
				dataGrid = $('#datetable')
					.datagrid({
						url: '3-1.json', //请求地址
						fit: true, //自动补全
						fitColumns: false, //列是否自适应宽度
						striped: false, //隔行颜色
						collapsible: false, //是否可改变列宽
						singleSelect: true, //单一选中行
						border: true,
						pagination: true, //是否分页
						rownumbers: true, //是否显示行号列
						idField: 'id',
						pageSize: 10,
						pageList: [10, 20, 30, 40, 50],
						remoteSort: false, //是否通过远程排序
						nowrap: false, //是否强制不换行显示内容
						checkOnSelect: false,
						frozenColumns: [
							[{
								field: 'low10',
								title: '手机号码',
								width: 150,
								align: 'center',
								sortable: false
							}, {
								field: 'low2',
								title: '姓名',
								width: 100,
								align: 'center',
								sortable: false
							}]
						],
						columns: [
							[{
								field: 'low3',
								title: '性别',
								width: 50,
								align: 'center',
								sortable: false,
								formatter: function(value, row) {
									if (value == '1') {
										return '女';
									} else {
										return '男';
									}
								}
							}, {
								field: 'low6',
								title: '总交易订单数',
								width: 150,
								align: 'center',
								sortable: false
							}, {
								field: 'low1',
								title: '总交易金额',
								width: 150,
								align: 'center',
								sortable: false
							}, {
								field: 'low4',
								title: '首次光临时间',
								width: 150,
								align: 'center',
								sortable: false
							}, {
								field: 'low4',
								title: '最近光临时间',
								width: 150,
								align: 'center',
								sortable: false
							}, {
								field: 'action',
								title: '操作',
								width: 50,
								align: 'center',
								sortable: false,
								formatter: function(value, row) {
									var str = '';
									str += $
										.formatString(
											'<img onclick="once(\'{0}\');" src="{1}" title="明细"/>&nbsp;',
											row.low10,
											'../../images/ext_icons/shield.png');
									return str;
								}
							}]
						]
					});
			});

			function once(id) {
				var dialog = parent.$
					.modalDialog({
						title: '明细',
						width: 700,
						height: 300,
						href: 'html/menu/3-1once.html',
						buttons: [{
							text: '关闭',
							handler: function() {
								parent.$.modalDialog.handler
									.dialog('close');
							}
						}]
					});
			}
		</script>
	</head>

	<body>
		<table id="datetable"></table>
	</body>

</html>